import { Button, Card, Table, Modal, Form, type FormProps, Input } from "antd";
import type { TableProps } from "antd";
import { useEffect, useState } from "react";

type FieldType = {
  name?: string;
  company?: string;
  baseURL?: string;
};

export default () => {
  const { ipc }: any = window;
  const [data, setData] = useState<any[]>([]);
  const [open, setOpen] = useState(false);
  const columns: TableProps["columns"] = [
    {
      title: "服务商ID",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "服务商名称",
      dataIndex: "name",
    },
    {
      title: "公司名称",
      dataIndex: "company",
    },
    {
      title: "请求URL",
      dataIndex: "baseURL",
    },
  ];
  async function ipcList() {
    const res = await ipc.ServiceList();
    console.log(res);
    setData(res);
  }
  useEffect(() => {
    ipcList();
  }, []);

  const showModal = () => {
    setOpen(true);
  };
  const onCancel = () => {
    setOpen(false);
  };
  const onFinish: FormProps<FieldType>["onFinish"] = async (values) => {
    console.log("Success:", values);
    const res = await ipc.AddService(values);
    console.log(res);
  };
  return (
    <>
      <Card
        title="服务商列表"
        extra={<Button onClick={showModal}>添加服务商</Button>}
        bordered={false}
      >
        <Table columns={columns} dataSource={data} rowKey={"id"}></Table>
      </Card>
      <Modal title="添加服务商" open={open} onCancel={onCancel} footer={null}>
        <Form name="addservice" onFinish={onFinish}>
          <Form.Item<FieldType>
            label="服务商名称"
            name="name"
            rules={[{ required: true, message: "请输入服务商名称" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item<FieldType>
            label="公司名称"
            name="company"
            rules={[{ required: true, message: "请输入服务商名称" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item<FieldType>
            label="请求URL"
            name="baseURL"
            rules={[{ required: true, message: "请输入服务商名称" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};
